<template>
  <h2>
    <el-container class="container">
      <el-header class="header">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="人员搜索 :">
            <el-input v-model="queryObj.userName" placeholder="请输入" class="inputForm" clearable />
          </el-form-item>
          <el-form-item label="角色 :">
            <el-select v-model="queryObj.isRepair" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-search"
              @click="search"
            >查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main class="mian">
        <el-table
          v-loading="loading"
          :data="workList"
          style="width: 100%"
          highlight-current-row
          :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
        >
          <el-table-column label="序号" type="index" />
          <el-table-column label="人员名称" prop="userName" />
          <el-table-column label="角色" prop="roleName" />
          <el-table-column label="联系电话" prop="mobile" />
          <el-table-column label="完成工单(本月)" prop="workCount" />
          <el-table-column label="进行中工单" prop="progressTotal" />
          <el-table-column label="拒绝工单(本月)" prop="cancelCount" />
          <el-table-column prop="address" label="操作">
            <template #default="row">
              <span class="lookDetail" @click="looking(row.row.userId)"> 查看详细 </span>
            </template>
          </el-table-column></el-table>
        <!-- 分页 -->
        <pageSize
          :info="queryObj"
          @handleCurrentChange="handleCurrentChange"
        />
      </el-main>
      <!-- 弹窗 -->
      <Dirlog ref="dirLogId" :sho-work-dialog.sync="shoWorkDialog" />
    </el-container>
  </h2>
</template>

<script>
import { getWorkList } from '@/api/personnel/workload'

import pageSize from '@/views/equipment/components/page-tool.vue'
import Dirlog from './components/workerDetail.vue'
export default {
  name: 'WorkloadList',
  components: {
    pageSize,
    Dirlog
  },
  data() {
    return {
      loading: true,
      shoWorkDialog: false,

      value: '',
      options: [
        {
          value: true,
          label: '维修员'
        },
        {
          value: false,
          label: '运营员'
        }
      ],
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 10,
        totalPage: 10,
        userName: '',
        isRepair: true
      },

      workList: null
    }
  },
  created() {
    this.getWorkData()
    this.queryObj.isRepair = ''
  },
  methods: {
    async getWorkData() {
      const data = await getWorkList(this.queryObj)
      this.queryObj.pageIndex = data.pageIndex
      this.queryObj.pageSize = data.pageSize
      this.queryObj.totalCount = data.totalCount
      this.queryObj.totalPage = data.totalPage
      this.workList = data.currentPageRecords
      this.queryObj.userName = data.currentPageRecords.userName
      this.loading = false
    },
    // 分页
    handleCurrentChange(val) {
      if (val > this.queryObj.totalPage) {
        this.queryObj.pageIndex = this.queryObj.totalPage
      } else {
        this.queryObj.pageIndex = val
        this.getWorkData()
      }
    },
    looking(id) {
      this.shoWorkDialog = true
      this.$refs.dirLogId.getPersonDetails(id)
    },
    async search() {
      this.loading = true
      await getWorkList(this.queryObj)
      this.getWorkData()
      this.loading = false
    }
  }
}
</script>
<style scoped lang="scss">
h2 {
  margin-top: 70px;
}
.inputForm {
  border-radius: 4px;
  height: 36px !important;
  width: 210px;
}
.container {
  margin: 20px;
  margin-top: 80px;
  .header {
    background-color: #fff;
    height: 65px;
    padding-top: 10px;
    .btn {
      background-color: #5f84ff;
    }
  }
  .footer {
    background-color: #fff;
    height: 100px !important;
  }
  .mian {
    margin-top: 20px;
    background-color: #fff;
  }
}

::v-deep .el-form-item__label {
  font-size: 14px;
  color: #666260;
  font-weight: normal;
}
::v-deep .cell {
  font-size: 14px;
  color: #666666;
  font-weight: normal;
}
.lookDetail {
  color: #5f84ff;
  cursor: pointer;
}
</style>
